<template>
    <div class="fillcontain">
        <head-top></head-top>

        <div class="table_container">
            <el-row :gutter="20 " class="demo-autocomplete">
                <el-col :span="7">
                    <template>
                        <div>
                            <span class="demonstration">操作类型:</span>
                            <el-select v-model="value" placeholder="操作类型">
                                <el-option-group v-for="group in options" :key="group.label" :label="group.label">
                                    <el-option v-for="item in group.options" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-option-group>
                            </el-select>
                        </div>
                    </template>
                </el-col>
                <el-col :span="9">
                    <template>
                        <div class="block">
                            <span class="demonstration">操作时间:</span>
                            <el-date-picker :disabled="value!='AdvanceFlow'&&value!='AgentFlow'" v-model="value2" type="datetimerange"
                                :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期"
                                end-placeholder="结束日期" align="right">
                            </el-date-picker>
                        </div>
                    </template>
                </el-col>
                <el-col :span="8">
                    <el-button type="primary" @click="getData" :disabled="value!='AdvanceFlow'&&value!='AgentFlow'">查询<i
                            class="el-icon-search el-icon--right"></i></el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="20">
                    &nbsp;
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" :disabled="value==''" @click="download">Excel下载<i class="el-icon-download el-icon--right"></i></el-button>
                </el-col>
            </el-row>
            <br />
            <h1 style="text-align: center;">{{statementName}}</h1>
            <br />
            <br />
            <template>
                <el-table v-show="value=='AccountBalance'" :data="statementDate" height="300" border style="width: 100%">
                    <el-table-column prop="id" align="center" label="序号">
                    </el-table-column>
                    <el-table-column prop="username" align="center" label="代理商名称">
                    </el-table-column>
                    <el-table-column prop="money" align="center" label="账户余额">
                    </el-table-column>
                </el-table>
            </template>
            <template>
                <el-table v-show="value=='AdvanceFlow'" :data="statementDate" height="300" border style="width: 100%">
                    <el-table-column prop="id" label="序号" align="center" width="50">
                    </el-table-column>
                    <el-table-column prop="username" label="代理商名称" align="center" width="170">
                    </el-table-column>
                    <el-table-column prop="money" align="center" label="预付款" width="90">
                    </el-table-column>
                    <el-table-column prop="accountMoney" align="center" label="账户余额" width="100">
                    </el-table-column>
                    <el-table-column prop="memo" align="center" label="备注信息">
                    </el-table-column>
                    <el-table-column prop="detaildatetime" align="center" label="时间" width="170">
                    </el-table-column>
                </el-table>
            </template>

            <template>
                <el-table v-show="value=='AgentFlow'" :data="statementDate" height="300" border style="width: 100%">
                    <el-table-column prop="id" label="序号" align="center" width="50">
                    </el-table-column>
                    <el-table-column prop="username" label="代理商名称" align="center" width="170">
                    </el-table-column>
                    <el-table-column prop="money" align="center" label="预付款" width="90">
                    </el-table-column>
                    <el-table-column prop="accountMoney" align="center" label="账户余额" width="100">
                    </el-table-column>
                    <el-table-column prop="memo" align="center" label="备注信息">
                    </el-table-column>
                    <el-table-column prop="detaildatetime" align="center" label="时间" width="170">
                    </el-table-column>
                </el-table>
            </template>

            <template>
                <el-table v-show="value=='ProductClassification'" :data="statementDate" height="300" border style="width: 100%">
                    <el-table-column prop="id" align="center" label="序号">
                    </el-table-column>
                    <el-table-column prop="productName" align="center" label="产品分类名称">
                    </el-table-column>
                    <el-table-column prop="count" align="center" label="数量">
                    </el-table-column>
                    <el-table-column prop="price" align="center" label="价格">
                    </el-table-column>
                </el-table>
            </template>

            <template>
                <el-table v-show="value=='CustomerConsumption'" :data="statementDate" height="300" border style="width: 100%">
                    <el-table-column prop="id" align="center" label="序号">
                    </el-table-column>
                    <el-table-column prop="customName" align="center" label="客户名称">
                    </el-table-column>
                    <el-table-column prop="customTypeName" align="center" label="类型">
                    </el-table-column>
                    <el-table-column prop="price" align="center" label="总消费额">
                    </el-table-column>
                </el-table>
            </template>
        </div>

    </div>
</template>

<script>
    import {
        statement
    } from '@/api/getData'
    import headTop from '../components/headTop'
    import {
        baseUrl
    } from '@/config/env'
    export default {
        data() {
            return {
                options: [{
                        label: '财务报表',
                        options: [{
                            value: 'AccountBalance',
                            label: '代理商账户余额报表'
                        }, {
                            value: 'AdvanceFlow',
                            label: '预付款流水报表'
                        }, {
                            value: 'AgentFlow',
                            label: '代理商流水报表'
                        }]
                    }, {
                        label: '产品报表',
                        options: [{
                            value: 'ProductClassification',
                            label: '产品分类数量/金额汇总'
                        }]
                    },
                    {
                        label: '消费报表',
                        options: [{
                            value: 'CustomerConsumption',
                            label: '客户消费汇总'
                        }]
                    }
                ],
                value: '',
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
                value2: null,
                statementDate: [],
                statementName: ''
            }
        },
        components: {
            headTop,
        },
        methods: {
            download: function() {
                var url = baseUrl + "/download" + this.value;
                if (this.value == 'AdvanceFlow' || this.value == 'AgentFlow') {
                    if (this.value2 != null) {
                        var begin = this.value2[0].getTime();
                        var end = this.value2[1].getTime();
                        url += "?begin=" + begin + "&end=" + end;
                    }
                }
                window.location.href = url;
            },
            async getData() {
                console.log(this.value2)
                var parmas = {};
                if (this.value == 'AdvanceFlow' || this.value == 'AgentFlow') {
                    if (this.value2 != null) {
                        var begin = this.value2[0].getTime();
                        var end = this.value2[1].getTime();
                        parmas = {
                            begin: begin,
                            end: end
                        };
                    }
                }
                const res = await statement(this.value, parmas);
                this.statementName = res[0].sheetName;
                res.splice(0, 1);
                this.statementDate = res;
            }
        },
        watch: {
            value: function(val) {
                this.getData()
            }
        }
    }
</script>

<style lang="less">
    @import '../style/mixin';

    .table_container {
        padding: 20px;
    }
</style>
